<!-- @author zhengjie -->
<template>
    <div class="node-ul">
        <div class="node-headline">
            <div class="title">
                <img class="log" v-show="type == 0" src="@/assets/images/node0.png" />
                <img class="log" v-show="type == 1" src="@/assets/images/node1.png" />
                <img class="log" v-show="type == 2" src="@/assets/images/node2.png" />
                <img class="log" v-show="type == 3" src="@/assets/images/node3.png" />
                {{ title }}({{ num }})
            </div>
            <div class="paging">
                <img class="paging-img" src="@/assets/images/nodeleft.png" style="margin-left: 10px;"
                    @click="setOptAuto(true)">
                <div class="paging-ul">
                    <div class="paging-li " v-for="(group, idx) in totalGroups" :key="idx" @click="setOpt(group)"
                        :class="{ 'paging-opt': group == currentPage }">{{ group }}</div>
                </div>
                <img class="paging-img" src="@/assets/images/noderihgt.png" @click="setOptAuto(false)">
            </div>
        </div>
        <div>
            <slot class="node-ul-solt"></slot>
        </div>

    </div>
</template>
  
<script>
export default {
    name: 'NodeUl',
    props: {
        title: {
            type: String
        },
        num: {
            type: Number
        },
        type: {//0-机房,1-传感器,2-摄像头,3-天线
            type: String,
        },
        arr: {
            type: Object 
        }
    },
    watch: {

        arr(newValue) {
            // console.log('父组件的值发生变化:');
            this.currentPage = 1;
        },
    },
    data() {
        return {
            name: '',
            open: false,
            pageSize: 8, // 每页的数量
            currentPage: 1, // 当前页数
        }
    },
    created() {
        if(this.type == 0){
            this.pageSize = 1
        }
    },
    computed: {
        totalGroups() {
            // 计算总组数，使用 Math.ceil 来确保有余数时向上取整
           
            return Math.ceil(this.num / this.pageSize);
        },
    },
    methods: {
        // closeDialog() {//关闭回调
        //     this.$emit("closeDialog", false);
        // },

        changePage(page) {
            // 处理分页按钮点击事件
            this.currentPage = page;
            // 在这里可以根据当前页数获取相应数据
        },
        setOpt(index) {
            this.currentPage = index
            this.$emit("setCurrentPage", this.currentPage);
            // console.log( this.currentPage);
        },
        setOptAuto(type) {
            if (type) {
                this.currentPage = this.currentPage == 1 ? this.currentPage : this.currentPage - 1
            } else {
                this.currentPage = this.currentPage == (Math.ceil(this.num / this.pageSize)) ? this.currentPage : this.currentPage + 1
            }
            this.$emit("setCurrentPage", this.currentPage);
            // console.log( this.currentPage);

        }
    }
}
</script>
  
<style rel="stylesheet/scss" lang="scss" scoped>
.node-ul {
    width: 900px;
    margin-bottom: 8px;

    .node-headline {
        display: flex;

        .log {
            width: 20px;
            height: 20px;
            margin-left: 10px;
        }

        .title {
            display: flex;
            align-items: center;
            width: 110px;
            height: 35px;
            color: #EDEDED;
            font-size: 14px;
            font-weight: 700;
            background: linear-gradient(to right, #005983, #03385A) !important;
            border-radius: 5px 5px 0 0;
        }

        .paging {
            display: flex;
            align-items: center;
            background-color: #1C2237;
            width: calc(100% - 110px);
            height: 30px;
            margin-top: 5px;
            border-radius: 0 5px 0 0;

            .paging-img {
                width: 11px;
                height: 18px;
                cursor: pointer;
            }

            .paging-ul {
                margin: 0 10px;
                display: flex;
                align-items: center;
                width: calc(100% - 70px);

                .paging-li {
                    cursor: pointer;
                    background-color: #161B27;
                    font-size: 14px;
                    width: 30px;
                    line-height: 20px;
                    margin: 0 2px;
                    color: #9A9DAA;
                    text-align: center;
                    border-radius: 5px;
                }

                .paging-opt {
                    background-color: #9A9DAA;
                    color: #000000;
                }

            }
        }

    }

    .node-ul-solt {
        background-color: #272F45;

    }


}
</style>
  